<template>
  <div class="tabbar">
    <ul class="tabbar-list">
      <li class="tabbar-item" v-for="(item,index) in tabbarList" :key="index" @click="changeTabbar(item.path)">
        <!-- 选中样式 -->
        <template v-if="item.isChecked">
            <img :src="item.imgUrl" alt="">
        </template>
        <!-- 未选中样式 -->
        <template v-else>
            <img :src="item.imgUrlNo" alt="">
        </template>
        <span :class="!item.isChecked ? 'isChecked' : ''">{{ item.title }}</span>
        <!-- 小红点数字标 -->
        <template v-if="item.title === '好友' && contactsNotice!=0">
            <div class="dots">{{ contactsNotice }}</div>
        </template>
        <template v-else-if="item.title === '消息' && messageNotice!=0">
            <div class="dots">{{ messageNotice }}</div>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            tabbarList: [
                {imgUrl: './images/xiaoxi.png', imgUrlNo: './images/xiaoxi_no.png', title: '消息', path: '/message', isChecked: false},
                {imgUrl: './images/haoyourenzheng.png', imgUrlNo: './images/haoyourenzheng_no.png', title: '好友', path: '/contacts', isChecked: false},
                {imgUrl: './images/shoucang.png', imgUrlNo: './images/shoucang_no.png', title: '动态', path: '/space', isChecked: false}
            ]
        }
    },
    computed: {
        ...mapState({
            friendNoticeNum: state => state.notice.friendNoticeNum,
            groupNoticeNum: state => state.notice.groupNoticeNum,
            messageNotice: state => state.notice.messageNotice
        }),
        contactsNotice() {
            return this.friendNoticeNum + this.groupNoticeNum
        }
    },
    methods: {
        _initTabbar() {
            this.tabbarList.forEach(i => {
                if (this.$route.path !== i.path) {
                    return
                }
                this.$set(i, 'isChecked', true)
            })
        },
        changeTabbar(path) {
            if (this.$route.path === path) {
                return
            }
            this.$router.replace(path)
        }
    },
    mounted() {
        this._initTabbar()
    }
}
</script>

<style lang="less" scoped>
.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.3333rem;
  background-color: #fff;
  border-top: .0267rem solid #cdc9c9;
  .tabbar-list {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .tabbar-item {
        width: .7467rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position: relative;
        img {
            width: .7467rem;
            height: .7467rem;
        }
        span {
            font-size: .3467rem;
        }
        .dots {
            position: absolute;
            top: 0;
            right: -0.2667rem;
            width: 0.5rem;
            height: 0.5rem;
            background-color: #f06262;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
        }
        .isChecked {
            color: #777777;
        }
    }
  }
}
</style>
